<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true"><block slot="content" class="text-000 text-black text-bold">我的订单</block></cu-custom>
		<!--Tab切换-->
		<view>
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="flex-sub relative" v-for="(item,index) in tabArr" :key="index" @tap="tabChange" :data-id="index" >
						<view class="cu-item" :class="index==tabCurrent?'text-f00 cur':''" style="padding:0;">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 订单信息 -->

		<!-- 全部订单开始 -->
			<view class="radius bg-white margin-sm padding" v-for="(item,index) in currentOrder" :key="index">
				<view class="flex justify-between align-center">
					<navigator :url="url(item)" hover-class="none">
						<view class="text-bold text-black overflow-hidden" style="white-space:nowrap;width:480rpx;">{{item.cinema.cinema_name}}<!--<text class="cuIcon-right text-gray"></text>--></view>
					</navigator>
					<view class="flex align-center">
						<view class="text-red" v-if="item.status===0">等待支付</view>
						<view class="text-gray" v-if="[2,3].includes(item.status)">已取消</view>
						<view class="text-gray" v-if="item.status===1">{{item.status_info}}</view>
						<text class="inline-block solid margin-lr-xs" style="width:2rpx;height:25rpx;"></text>
						<text class="cuIcon-delete text-grey light" @tap="del(item.order_id)"></text>
					</view>

				</view>
				<view class="flex margin-top" @tap="detail(item)">
					<view class="">
						<img :src="$tools.mThumb($config.movieImgDomain + item.schedule.poster,500)" class="cu-avatar radius margin-right" style="width:200rpx;height:250rpx;"/>
					</view>
					<view class="flex flex-direction justify-between">
						<view>
							<view class="text-bold text-lg margin-bottom text-black">{{item.schedule.show_name}}</view>
							<view class="text-gray text-sm">
								<view class="margin-bottom-xs">{{item.schedule.mark}}</view>
								<view>{{item.schedule.hall_name}} {{item.seat_names}}</view>

							</view>
						</view>
						<view class="margin-bottom-xs text-gray">{{item.add_time_info}}</view>
					</view>
				</view>
				<!-- 订单价格 -->
				<view>
					<view class="flex justify-end align-center margin-right margin-top">
						<text class="text-gray">共{{item.total_num}}张，</text>
						<text>合计:￥<text class="text-xl margin-left-xxs margin-bottom-xs">{{item.total_price}}</text>元</text>
					</view>
					<view class="flex justify-end margin-right margin-top">
						<button class="cu-btn line-gray round margin-right-xs" v-if="item.status===0" @tap="cancel(item.order_id)">取消</button>
						<button class="cu-btn line-red  round margin-right-xs" v-if="item.status===0" @tap="pay(item.order_id)">付款</button>
					</view>
				</view>
			</view>
		<!-- 全部订单结束 -->
		<!-- 售后开始 -->
		<view class="" v-if="tabCurrent==4">
			<!-- 顶部售后信息 -->
			<view class="flex margin align-center justify-center">
			  <view class="margin-right">
				<img :src="$tools.j('online_service@3x.png')" style="width:72rpx;height:72rpx"/>
			  </view>
			  <text class="text-gray text-df">亲~~如果您购票遇到了问题，请先联系我们的客服哦，感谢您的支持！</text>
			</view>
			<view class="bg-white padding-lr">
				<!-- 订单号 -->
				<view class="flex justify-between padding-tb-sm solid-bottom">
				  <view class="text-black">订单号</view>
				  <input type="text" placeholder="请输入" :value="form.order_id" @input="inputFill" data-name="order_id" style="text-align:right">
				</view>
				<!-- 联系方式 -->
				<view class="flex justify-between padding-tb-sm solid-bottom">
				  <view class="text-black">联系方式</view>
				  <input type="text" placeholder="请输入" :value="form.phone" @input="inputFill" data-name="phone" style="text-align:right">
				</view>
				<!-- 申请原因 -->
				<view class="solid-bottom padding-tb-sm">
				  <view class="text-black">申请原因</view>
				  <textarea value="" placeholder="请输入" :value="form.mark" @input="inputFill" data-name="mark" class="padding-top-sm"/>
				</view>
			</view>
			<view class="cu-btn radius-lg bg-red fixed padding-tb-lg" style="bottom: 40rpx;width: 90%;left: 5%;" @tap="create">提交申请</view>
		</view>
		<!-- 售后结束 -->
        <!--订单为空开始-->
        <view v-if="currentOrder && currentOrder.length===0&&tabCurrent!==4" class="flex flex-direction text-center justify-center padding-top-xl">
          <img :src="$tools.j('empty@3x.png')" style="width:290rpx;height:280rpx" class="margin-lr-auto margin-top-xxl">
          <view class="text-gray">去看场电影吧~~</view>
        </view>
       <!--订单为空结束-->

		<!--加载更多[more|loading|noMore]-->
		<load-more :status="tabArr[tabCurrent].context.loading" iconType="circle" :contentText="tabArr[tabCurrent].context"/>
	</view>	
</template>

<script>
import loadMore    from "@/components/LoadMore/uni-load-more"
const pageInfo = { page:1 }
const context  = { contentrefresh:'',contentnomore:'没有更多数据了',loading:'more'}
	export default {
		components:{
			loadMore
		},
		data() {
			return {
                rules: {
                    order_id: [{required: true, message: '请填写订单号'}],
                    phone: [{required: true, message: '请填写联系方式'}],
                    mark:[{required: true, message: '请填写申请原因'}]
                },
				tabArr:[
					Object.assign({name:'全部',data:[]},   {paginate:{...pageInfo}},{context:context}),
					Object.assign({name:'待付款',data:[]}, {paginate:{...pageInfo,type: 0}},{context:{...context}}),
					Object.assign({name:'待出票',data:[]}, {paginate:{...pageInfo,type: 5}},{context:{...context}}),
					Object.assign({name:'已出票',data:[]},{paginate:{...pageInfo,type:6}},{context:{...context}}),
					Object.assign({name:'售后',data:[]}),
				],
				tabCurrent: 0,
				order:[], 
				CustomBar:this.CustomBar,
				order_type_count:'',
				form:{
					order_id:"",
					phone:"",
					mark:""
				}
			}
		},
		computed:{
			currentOrder(){
				console.log(this.order[this.tabCurrent])
				if(!this.order[this.tabCurrent]) return
				return this.order[this.tabCurrent].list || []
			}
		},
		methods: {

			fetchData(refresh=false){
				console.log('fetchData')
				//分页参数 tabCur 默认全部订单

				//当前第几个索引
				let currIndex  = this.tabCurrent
				let _this = this
				//走接口
				_this.$api.orderList(_this.tabArr[currIndex].paginate).then(res=>{
					if(res.status===200){
						if(!refresh && _this.order && _this.order[currIndex] && _this.order[currIndex].list && _this.order[currIndex].list.length>0){
							res.data.list = _this.order[currIndex].list.concat(res.data.list)
						}
						console.log('//数据res.data全部丢进去')
						console.log(res.data)
						//数据res.data全部丢进去
						_this.$set(_this.order,_this.tabCurrent,res.data)

						let {current_page,last_page,total} = res.data.meta //分页信息
						if(current_page>=last_page){
							_this.tabArr[currIndex].context.loading='noMore' //没有了
						}
						if(total===0 && current_page===1){
							_this.tabArr[currIndex].context.contentnomore = '';
						}

					}
				})

			},
			// 售后
            inputFill(e){
                console.log(e)
                let field        = e.target.dataset.name
                this.form[field] = e.detail.value
				console.log(field)
                // this.vaildate(field)
            },
            vaildate(field=''){
                let flag = true
                let rule = this.rules
                for(let i in rule){
                    if(!field || i===field){
                        rule[i].forEach((v,k)=>{
                            if(v.required){
                                if(!this.form[i]){
									this.$tools.msg(v.message)
                                    flag=false
                                }else{
									
                                }
                            }
                        })
                    }
					if(!flag){
						return flag
					}
                }
                return flag
            },
            async  create(){
                let valid =  this.vaildate()
				console.log(valid+"------")
                if(valid){
                    let  res   = await this.$api.orderSale(this.form)
                    if(res){
                        this.$tools.success('提交成功').then(res=>{
                            uni.navigateBack()
                        })
                    }
                }
            },
			//切换tab
			tabChange(e) {
				console.log(e)
				this.tabCurrent     = e.currentTarget.dataset.id;
				if(this.order[this.tabCurrent]===undefined){
					if(this.tabCurrent!==4){
						this.fetchData();
					}
				}
			},
			url(item){
				return `/pages/cinema/detail?cinema_id=${item.cinema.cid}&cinema_name=${item.cinema.cinema_name}&show_id=${item.schedule.yid}`
			},
			detail(item){
				console.log('跳转订单详情')
				console.log(item)
				let url = `/pages/order/detail?orderId=${item.order_id}`
				this.$tools.goTo(url)
		    },
			//删除订单
			del(orderId){
				this.$tools.delConfirm(`确认删除此订单？`).then(res=>{
					if(res){
						 this.$api.orderDelete({orderId}).then(res=>{
							 this.$tools.success('成功').then(()=>{
								 this.fetchData(true);
							 })
						 })
					}
				})
			},
			//删除订单
			cancel(orderId){

				this.$thirdApi.showModal('提醒','确认取消此订单？').then(res=>{
					if(res){
						this.$api.orderCancel({orderId}).then(res=>{
							this.$tools.success('成功').then(()=>{
								this.fetchData(true);
							})
						})
					}
				})
			},
			//支付
			async pay(orderId){
				let res = await this.$api.orderPay({orderId});
				console.log('获取支付参数')
				console.log(res)
				console.log(res.data.result.jsConfig)

				this.$thirdApi.pay(res.data.result.jsConfig).then(res=>{
					//支付成功
					console.log(res.errMsg)
					//errMsg: "requestPayment:fail cancel"   //requestPayment:ok
					if(res && res.errMsg==='requestPayment:ok'){
						console.log('支付成功')
						this.$tools.success('支付成功').then(res=>{
							this.fetchData(true)
						})
					}else{
						console.log('支付失败')
						this.$tools.msg('支付失败').then(res=>{
							this.fetchData(true)
						})
					}
				})
			}
		},
		onLoad(options){
			if(options.status  && [...this.tabArr.keys()].includes(parseInt(options.status))){
				this.tabCurrent = options.status
			}
			if(options.status!=4) this.fetchData()
			this.form["phone"]=this.$user.user().phone||""
		},
		onReachBottom(){

			console.log('onReachBottom')
			console.log('底部来了')
			let curr = this.tabCurrent;
			//当前页 和总页数
			let {current_page,last_page} = this.order[curr].meta //分页信息
			if(current_page>=last_page){
				this.tabArr[curr].context.loading='noMore' //没有了
			}else{
				//页码+1
				current_page++
				this.tabArr[curr].paginate.page = current_page
				this.tabArr[curr].context.loading='loading' //加载中
				this.fetchData()
			}

		},


	}
</script>

<style>
</style>
